<template>
  <div class="likeSongsListCpm">
    <div class="songsList" v-if="list.length !== 0">
      <div class="songsList_item title">
        <div class="songsList_item_index"></div>
        <div class="songsList_item_info">歌曲</div>
        <div class="songsList_item_author">作者</div>
        <div class="songsList_item_dt">时长</div>
      </div>
      <div class="songsList_item" v-for="(item, index) in list" :key="item.id">
        <div class="songsList_item_index">{{ index + 1 }}</div>
        <div class="songsList_item_info">
          <GlobalImageDeep
            :imgWidth="70"
            :imgHeight="70"
            :url="item.al.picUrl"
          />
          <p @click="toSongDetailsPage(item.id)">{{ item.name }}</p>
          <div class="songsList_item_info_bt">
            <div>
              <i class="iconfont icon-bofang"></i>
            </div>
            <div>
              <i class="iconfont icon-tianjiawenjian"></i>
            </div>
          </div>
        </div>
        <div class="songsList_item_author one_txt_cut">
          <!-- {{ formatName(item.ar) }} -->
          <span
            v-for="itemm in item.ar"
            :key="itemm.id"
            @click="toSingerDetailsPage(itemm.id)"
            >{{ itemm.name }}</span
          >
        </div>
        <div class="songsList_item_dt">{{ formatMS(item.dt) }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import {
  getUserLikeSong,
  getSongDetails,
} from "../../../../../api/userDetailsApi";
export default {
  name: "likeSongsListCpm",
  components: {},
  props: {
    uid: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.getUserLikeSongDeatilsMethod();
  },
  methods: {
    async getUserLikeSongDeatilsMethod() {
      let result = await getUserLikeSong(this.uid);
      if (result.code === 200) {
        let details = await getSongDetails(result.ids.join(","));
        if (details.code === 200) {
          this.list = details.songs;
        }
      }
    },
    // 格式化时间
    formatDate(time) {
      return moment(time).format("MM月DD日");
    },
    formatMS(dt) {
      return moment(dt).format("mm:ss");
    },
    formatName(names) {
      let str = "";
      names.forEach((item) => {
        str = str + item.name + "/";
      });
      str = str.slice(0, str.length - 1);
      return str;
    },
    toSongDetailsPage(id) {
      this.$router.push(`/songDetails/${id}`);
    },
    toSingerDetailsPage(id) {
      this.$router.push(`/singerDetails/${id}`);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.likeSongsListCpm {
  .songsList {
    padding: 20px 0;
    font-size: 14px;
    .title {
      color: #999;
      height: 50px !important;
    }
    .songsList_item {
      display: flex;
      align-items: center;
      height: 80px;
      // background-color: red;
      &:hover {
        .songsList_item_info_bt {
          opacity: 1 !important;
        }
      }
      .songsList_item_index {
        width: 40px;
        text-align: center;
      }
      .songsList_item_author {
        width: 200px;
        padding-right: 20px;
        // background-color: green;
        span {
          margin-right: 4px;
          &:hover {
            cursor: pointer;
            color: @globalColor;
          }
        }
      }
      .songsList_item_dt {
        width: 50px;
        // background-color: #fff;
      }
      .songsList_item_info {
        position: relative;
        display: flex;
        align-items: center;
        flex: 1;
        padding-right: 20px;
        p {
          margin-left: 10px;
          &:hover {
            cursor: pointer;
            color: @globalColor;
          }
        }
        /deep/ .el-image img {
          border-radius: 8px;
        }
        .songsList_item_info_bt {
          display: flex;
          opacity: 0;
          position: absolute;
          right: 20px;
          > div {
            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #999999;
            &:hover {
              border: 1px solid @globalColor;
              color: @globalColor;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
</style>
